<template>
  <div class="blog-detail-container" ref="container" @scroll="debounceHandleScroll">
    <div class="content">
      <h1 class="title">{{ blog.title }}</h1>
      <div class="aside">
        <span class="date">日期：{{ formatDate(blog.createDate) }}</span>
        <span class="scan">浏览：{{ blog.scanNumber }}</span>
        <a href="#form-container" class="comment"
          >评论：{{ blog.commentNumber }}</a
        >
        <span class="category"
          ><RouterLink
            :to="{
              name: 'blogCategory',
              query: {
                page: page,
                limit: limit,
              },
              params: {
                categoryId: blog.category.id,
              },
            }"
            >{{ blog.category.name }}</RouterLink
          ></span
        >
      </div>
      <div class="markdown-body" v-html="blog.htmlContent"></div>
    </div>
    <MessageArea
      @submit="handleSubmit"
      title="评论列表"
      :subTitle="data.total"
      :commentList="data.rows"
      :isListLoading="isListLoading"
    />
  </div>
</template>

<script>
import MessageArea from "./MessageArea.vue";
import formatDate from "../utils/formatDate.js";
import debounce from "../utils/debounce.js";
import { getComment, addComment } from "../api/blog.js";

export default {
  components: {
    MessageArea,
  },
  props: {
    blog: {
      type: Object,
      required: true,
    },
  },
  data() {
    return {
      isListLoading: false,
      page: 1,
      limit: 10,
      data: {},
      // debounceHandleScroll: debounce(this.handleScroll)
    };
  },
  async created() {
    this.$bus.$on("setMainScroll", this.handleSetMainScroll);
    this.data = await getComment(
      this.page,
      this.limit,
      +this.$route.params.blogId
    );
  },
  destroyed(){
    this.$bus.$off("setMainScroll", this.handleSetMainScroll);
    this.$bus.$emit("mainScroll", null);
  },
  mounted() {
    const hash = location.hash;
    location.hash = "";
    setTimeout(() => {
      location.hash = hash;
    }, 50);
  },
  methods: {
    formatDate,
    async handleSubmit(commentInfo, callback) {
      const resp = await addComment({
        blogId: this.$route.params.blogId,
        ...commentInfo,
      });
      this.data.total++;
      this.data.rows.unshift(resp);
      callback("评论成功!");
    },
    // debounceHandleScroll: debounce(function(e){
    //   this.handleScroll(e);
    // }),
    debounceHandleScroll(e){
      if(!this.handleScrollDebounce){
        this.handleScrollDebounce = debounce(this.handleScroll);
      }
      this.handleScrollDebounce(e);
    },
    async handleScroll(e) {
      this.$bus.$emit("mainScroll", e.target);
      const container = e.target;
      if (
        !this.data.rows ||
        this.isListLoading ||
        this.data.rows.length >= this.data.total
      ) {
        return;
      }
      if (
        container.scrollTop + container.clientHeight >=
        container.scrollHeight - 10
      ) {
        this.page++;
        this.isListLoading = true;
        const resp = await getComment(
          this.page,
          this.limit,
          this.$route.params.blogId
        );
        this.isListLoading = false;
        this.data.total = resp.total;
        this.data.rows = this.data.rows.concat(resp.rows);
      }
    },
    handleSetMainScroll(scrollTop){
      this.$refs.container.scrollTop = scrollTop;
    }
  },
};
</script>

<style scoped lang="less">
@import "../styles/color.less";
@import "../styles/markdown.css";
@import "../../node_modules/highlight.js/styles/github.css";

.blog-detail-container {
  width: 100%;
  height: 100%;
  overflow-y: auto;
  padding: 20px;
  scroll-behavior: smooth;
  .title {
    margin: 20px 0;
  }
  .aside {
    color: @gray;
    font-size: 12px;
    margin-bottom: 30px;
    span,
    a {
      margin-right: 15px;
    }
  }
  .message-area-container {
    margin-top: 30px;
  }
}
</style>